<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>开户申请</title>
		<link rel="stylesheet" href="css/muse-ui.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
		<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
		<link rel="stylesheet" href="css/muse-ui-loading.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_951857_sr7zod4vu4.css">
		<script src="js/vue.min.js"></script>
		<script src="js/muse-ui.js"></script>
		<script src="js/muse-ui-loading.js"></script>
		<script src="js/muse-ui-toast.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/utils.js"></script>
		<script src="js/lrz.bundle.js"></script>
		<style>
			.container{
				height:calc(100vh);
				width: 100%;
				padding: 20px;
			}
			.container input {
				color: #ff4081;
			}
			.login-head{
				margin-top: 20%;
				width: 100%;
				text-align: center;
			}
			.icon-denglu{
				color: #fff;
				font-size: 70px;
			}
		</style>
	</head>
	<body>
		<div id="body">
			<mu-appbar style="width: 100%;position: fixed;top: 0;padding-top: 20px;height: auto;" color="secondary">
				<mu-button icon slot="left" @click="util.back()">
					<mu-icon value="arrow_back"></mu-icon>
				</mu-button>
				开户申请
			</mu-appbar>
			<mu-container style="padding-top: 76px;">
				<mu-text-field v-model="name" label="姓名" label-float full-width color="secondary"></mu-text-field><br />
				<mu-text-field v-model="phone" label="手机号" type="number" label-float full-width color="secondary"></mu-text-field><br />
				<div style="display: flex;justify-content: space-between;align-items: center;">
					<mu-text-field v-model="code" type="number" label="验证码" label-float color="secondary">
					</mu-text-field>
					<mu-button color="secondary" flat @click="getCode()" v-if="countDownNumber==0">获取验证码</mu-button>
					<mu-button color="secondary" flat v-else disabled>{{countDownNumber}}S</mu-button>
				</div>
				<mu-text-field v-model="idCard" label="身份证号码" type="number" label-float full-width color="secondary"></mu-text-field><br />
				<mu-select label="小区" v-model="buildingId" full-width color="secondary">
					<mu-option v-for="item,index in buildingList" :key="index" :label="item.name" :value="item.id"></mu-option>
				</mu-select>
				<mu-text-field v-model="address" label="详细地址(如几栋、门牌号)" label-float full-width color="secondary"></mu-text-field><br />
				<div style="width: 100%;height: 150px;border: dashed 1px #C0C0C0;color: #CCCCCC;font-size: 18px;display: flex;align-items: center;justify-content: center;" @click="takePhoto(0)">
					<img :src="idCardimage1" style="height: 100%;width: 100%;" v-if="!!idCardimage1" />
					<span v-else="">请上传身份证国徽面</span>
				</div>
				<div style="width: 100%;height: 150px;border: dashed 1px #C0C0C0;color: #CCCCCC;font-size: 18px;display: flex;align-items: center;justify-content: center;margin-top: 15px;"  @click="takePhoto(1)">
					<img :src="idCardimage2" style="height: 100%;width: 100%;" v-if="!!idCardimage2"/>
					<span v-else="">请上传身份证人像面</span>
				</div>
				<mu-button color="secondary" style="margin-bottom: 30px;margin-top: 15px;" full-width @click="applyAccount">立即申请
					<mu-icon value="arrow_forward" right></mu-icon>
				</mu-button>
			</mu-container>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#body",
			data() {
				return {
					name: "",
					phone: "",
					idCard: "",
					idCardimage1: "",
					idCardimage2: "",
					buildingId: "",
					buildingList: [],
					address: "",
					code: "",
					countDownNumber:"",
					getCodeNumber: "",
					index:0
				}
			},
			methods: {
				takePhoto(index) {
					vm.index = index;
					plus.camera.getCamera().captureImage(function(p) {
						plus.io.resolveLocalFileSystemURL(p, function(entry) {
							var localurl = entry.toLocalURL();
							vm.appendFile(localurl);
						});
					});
				},
				appendFile(path) {
					lrz(path).then(function(rst) {
						vm.imgPath = rst.base64;
						vm.upload(rst.base64.split(';base64,')[1]);
					})
				},
				upload(base64){
					var params = {
						base64:base64
					}
					util.ajax("/file/base64ToAlioyun", params, data => {
						if(vm.index==0){
							this.idCardimage1 = data;
						}else{
							this.idCardimage2 = data;
						}
					},true,"text")
				},
				applyAccount() {
					if (!this.name) {
						util.tip("请输入您的姓名!")
						return;
					}
					if (!this.phone) {
						util.tip("请输入您的手机号!")
						return;
					}
					if (this.phone.length != 11) {
						util.tip("请输入正确的手机号!")
						return;
					}
					if(!this.code) {
						util.tip("请输入验证码");
						return;
					}
					if(this.code != this.getCodeNumber) {
						util.tip("验证码错误");
						return;
					}
					if (!this.idCard) {
						util.tip("请输入身份证号码!")
						return;
					}
					if (this.idCard.length != 18) {
						util.tip("请输入正确的身份证号码!")
						return;
					}
					if (!this.buildingId) {
						util.tip("请选择您所在的小区!")
						return;
					}
					if (!this.address) {
						util.tip("请输入您的详细地址(如几栋、门牌号)!")
						return;
					}
					var params = {
						name: this.name,
						phone: this.phone,
						buildingId: this.buildingId,
						address: this.address,
						idCard:this.idCard,
						idCardimage1:this.idCardimage1,
						idCardimage2:this.idCardimage2,
						applyDate:util.dateFormat("yyyy-MM-dd hh:mm:ss",new Date() )
					}
					util.ajax("/api/method/applyAccount", params, data => {
						if (data.code == 1) {
							alert("申请成功,请耐心等待工作人员上门服务!");
							util.back()
						} else {
							util.tip("请稍后再试!");
						}
					})
				},
				getBuildingList() {
					var params = {
						name: ""
					}
					util.ajax("/api/method/getBuildingList", params, data => {
						this.buildingList = data.object;
					})
				},
				getCode() {
					if (this.phone.length != 11) {
						util.tip("请输入正确的手机号!");
						return;
					}
					var params = {
						phone: this.phone
					}
					util.ajax("/rbac/makeRegCode", params, data => {
						util.tip(data.msg);
						this.getCodeNumber = data.object;
						this.countDownNumber = 60;
						var timer = setInterval(()=>{
							if(this.countDownNumber==0){
								clearInterval(timer)
							}else{
								this.countDownNumber--;
							}
						},1000)
					})
				},
			},
			mounted() {}
		})
		document.addEventListener('plusready', function() {
			vm.getBuildingList();
		});
	</script>
</html>
